<template>
  <div style="margin-top:30px;">
    <el-form ref="form" v-loading="loading" :model="form" label-width="80px">
      <el-tree
        ref="tree"
        :data="form.treeData"
        :props="props"
        node-key="code"
        show-checkbox
        :default-expanded-keys="form.checkedResourceCodeList"
        :default-checked-keys="form.checkedResourceCodeList"
      />
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import {
  getResourceTree,
  getRoleResourceTree,
  updateRoleResourceTree
} from "@/api/authorityCreate";
Vue.use(VXETable);
export default {
  name: "RolePermission",
  props:['code'],
  data() {
    return {
      props: {
        label: "name",
        children: "child"
      },
      loading: false,
      form: {
        code: "",
        treeData: [],
        checkedResourceCodeList: [],
        resourceCodeList: []
      }
    };
  },
  created() {
    this.getInfo(this.code)
  },
  methods: {
    // 获取页面信息
    getInfo(code) {
      this.form.code = code;
      this.form.treeData = [];
      this.form.checkedResourceCodeList = [];
      this.form.resourceCodeList = [];
      // 查询权限数
      getResourceTree().then(response => {
        this.form.treeData = response.data;
      });
      // 查询角色权限
      getRoleResourceTree({ code }).then(response => {
        this.form.checkedResourceCodeList = response.data;
      });
    },
    // 提交
    funcSubmit() {
      // 半选的节点
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      // 选中的节点
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      this.form.resourceCodeList.push(...halfCheckedKeys);
      this.form.resourceCodeList.push(...checkedKeys);
      const data = this.form;
      this.loading = true;
      updateRoleResourceTree(data)
        .then(response => {
          this.loading = false;
          this.$message({ message: response.msg, type: "success" });
          if (response.status === 0) {
            this.funcCancel();
          }
        })
    },
    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "permission");
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
</style>
